<template>
  <div>
    <slot :images="images" :options="options">
    </slot>
  </div>
</template>
<script>
import Viewer from 'viewerjs'
export default {
  props: {
    images: {
      type: Array
    },
    trigger: {},
    options: {
      type: Object,
      default:{}
    },
    isUpdate:{
        type:Boolean,
        default:true
    }
  },
  data () {
    return {
    }
  },

  computed: {
  },

  methods: {
    createViewer () {
        let _this=this;
        this.$viewer && this.$viewer.destroy();
        this.$viewer = new Viewer(this.$el, {
            show:function(){
                _this.isUpdate=false;
                _this.$viewer.update();
                console.log(1,_this.isUpdate);
            },
            hide:function(){
                _this.isUpdate=true;
                console.log(11,_this.isUpdate);
                _this.createViewer()
            }
        })
        this.$emit('inited',this.$viewer);
    }
  },
  watch: {
    images () {
      this.$nextTick(() => {
        console.log(this.isUpdate,'update');
        if(this.isUpdate){
            this.createViewer()
        }
      })
    },
    options: {
      handler: function () {
        this.$nextTick(() => {
          this.createViewer()
        })
      },
      deep: true
    }
  },

  mounted () {
    this.$nextTick(()=>{
        this.createViewer();
    })
  },

  destroyed () {
    this.$viewer && this.$viewer.destroy()
  }
}
</script>
